<template>
  <el-container class="container">
    <el-header class="header">
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <img src="../../assets/logo.png">
          </div>
        </el-col>
        <el-col :span="18" class="middle">
          <h2 class="title">超级赛亚人后台系统</h2>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <!--<a href="#" class="loginOut" @click.prevent="handleSignOut()">退出</a>-->
            <el-button type="primary" class="loginOut" @click.prevent="handleSignOut()">退出</el-button>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside class="aside" width="200px">
        <!--侧边栏-->
        <el-menu
          :router="true"
          :unique-opened="true"
        >
          <!--1-->
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="users">
              <i class="el-icon-setting"></i>
              <span>用户列表</span>
            </el-menu-item>
          </el-submenu>
          <!--2-->
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>权限管理</span>
            </template>
            <el-menu-item index="roles">
              <i class="el-icon-user-solid"></i>
              <span>角色列表</span>
            </el-menu-item>
            <el-menu-item index="rights">
              <i class="el-icon-location"></i>
              <span>权限列表</span>
            </el-menu-item>
          </el-submenu>
          <!--3-->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="3-1">
              <i class="el-icon-location"></i>
              <span>商品列表</span>
            </el-menu-item>
            <el-menu-item index="3-2">
              <i class="el-icon-location"></i>
              <span>分类参数</span>
            </el-menu-item>
            <el-menu-item index="3-3">
              <i class="el-icon-location"></i>
              <span>商品分类</span>
            </el-menu-item>
          </el-submenu>
          <!--4-->
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="4-1">
              <i class="el-icon-location"></i>
              <span>订单列表</span>
            </el-menu-item>
          </el-submenu>
          <!--5-->
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>数据统计</span>
            </template>
            <el-menu-item index="5-1">
              <i class="el-icon-location"></i>
              <span>数据报表</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <!-- <el-row>
                <el-col :span="12">
                    <h1 class="text-jumbo text-ginormous">Oops!</h1>
                    <h2>该页面正在开发中，敬请期待</h2>
                    <h6>&nbsp;</h6>
                </el-col>
                <el-col :span="12">
                    <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
                </el-col>
        </el-row> -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import errGif from '../../assets/img/401.gif'
  export default {
    //mewVue之前触发
    beforeCreate () {
      //获取token
      const token = localStorage.getItem('token')
      //if token 有->继续渲染组件
      if (!token) {
        this.$router.push({name: 'login'})
      }
      //token没有->跳转登录
    },
    data () {
      return {
        errGif: errGif + '?' + +new Date(),
      }
    },
    methods: {
      handleSignOut () {
        /**
         * 1.清除token
         * 2.提示信息
         * 3.来到login组件
         * */
        localStorage.clear()
        this.$message.success('退出成功')
        this.$router.push('/login')
      }
    }
  }
</script>
<style>
  .container {
    height: 100%;
  }

  .header {
    background-color: #151A3C;
  }
  .title{
    color: #e9eef3;
  }

  .aside {
    background-color:white;
  }

  .main {
    background-color: white;
  }

  /*头部样式*/
  .middle {
    text-align: center;
  }

  .loginOut {
    line-height: 10px;
    margin-top: 10px;
    text-decoration: none;
  }
  .text-jumbo {
    font-size: 60px;
    font-weight: 700;
    color: #484848;
  }
</style>
